<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>品牌管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=e9c5bb62">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">
    <style type="text/css">
        th {
            text-align: center;
            width: 100px;
            height: 30px;
            background-color: #f8f8f8;
        }

        td {
            height: 35px;
            /* text-align: center;*/
        }
        .oaBtn {
            background: url(/dist/img/btn-bj2.png) repeat-y !important;
            background-size: 100% 100% !important;
            color: #fff !important;
        }

    </style>
</head>
<body>

<div id="brandList" style="position:relative; top:10px;left: 10px">
    <div>
        <input type="text" id="likeSelect" v-model="brandName" placeholder="模糊查询" size="12">

        <input type="button" id="getBrand" class="oaBtn" value="查询" @click="getByName()"
               style=" width:60px;position:relative;left: 10px">

        <input type="button" id="addBrand" class="oaBtn" value="新增品牌" @click="saveBrand()"
               style=" width:110px;position:relative;left: 415px">
    </div>


    <div>
        <table border="1" id="table" style=" text-align: center;position:relative; top:10px;border:1px solid #cbcbcd;">
            <tr>
                <th>品牌</th>
                <th style="  width: 300px;">备注</th>
                <th>操作时间</th>
                <th>操作人员</th>
                <th style="  width: 80px;">操作</th>
            </tr>
            <tr v-for="item in Brands">
                <td>{{item.brandName}}</td>
                <td>{{item.remark}}</td>
                <td>{{item.createTime}}</td>
                <td>{{item.createUser}}</td>
                <td>
                    <a id="upd" @click="update(item.id)">
                        编辑</a> &nbsp;&nbsp;
                    <a id="del" @click="deleteBrand(item.id)">删除</a>
                </td>
            </tr>
        </table>
        <div class="oa-pager text-center" style="margin-top: 5px;position:relative; left:-250px;" >
            共
            <span id="allCount"> 0 </span>条记录&nbsp;&nbsp;&nbsp;
            <span id="nowPage"> 1 </span>/<span id="allPage">1</span>&nbsp;&nbsp;&nbsp;
            <span class="oa-pager-button" id="first">首页</span>
            <span class="oa-pager-button" id="prev">上一页</span>
            <span class="oa-pager-button" id="next">下一页</span>
            <span class="oa-pager-button" id="last">尾页</span>
        </div>
    </div>

</div>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=63aed32f"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/dist/js/pages/apply/money/class.js"></script>
<script type="text/javascript" src="/dist/js/pages/system/systemService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/commonService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/changeMoneyToChinese.js"></script>
<script type="text/javascript" src="/dist/plugins/print/print.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script>
    //分页代码
    $.wyui.page.dataUrl = server.ip + "/deviceBrand/getBrandList.json";
    $.wyui.page.getByPage_callback = function (records) {
        console.log(records);
        app.Brands = records;
    };
    $.wyui.page.getByPage_scroll_callback = function (list) {
        if (list.length < 30) {
            isLoad = false;
        } else {
            for (var i = 0; i < list.length; i++) {
                app.list.push(list[i]);
            }
            isLoad = true;
        }
    };
    var app = new Vue({
        el: '#brandList',
        data: {
            Brands: [],
            isOk: '',
            list: [],
            brandName: '',
        },
        mounted: function () {
          /*  var that = this;
             $.wyui.postMethod('/deviceBrand/getBrandList.json', {}, function (r) {
             console.log(r);
             that.Brands = r.records;
             })*/
        },
        methods: {
            deleteBrand(id) {
                if (confirm('确认要删除吗？')) {
                    var that = this;
                    data = {'id': id};
                    $.wyui.postMethod('/deviceBrand/delById.json', data, function (r) {
                        this.isOk = r.isOk;
                        if (this.isOk == true) {
                            location.href = "deviceBrand.html";
                        }
                    });
                }
            },
            /*编辑修改*/
            update(id){
                $.dialog({
                    content: 'url:updateBrand.html?id=' + id,
                    title: '编辑品牌',
                    width: 400,
                    height: 300,
                    max: true,
                    min: true,
                    lock: true,
                });

            },
            /*模糊查询*/
            getByName(){
                var that = this;
                var data = {
                    'brandName': that.brandName
                };
                $.wyui.postMethod('/deviceBrand/getByName.json', data, function (r) {
                    if (!r.records) {
                        alert("没有找到符合条件的信息，请重新输入");
                    } else {
                        console.log(r);
                        that.Brands = r.records;
                    }
                })

            },
            /*新增品牌*/
            saveBrand(){
                $.dialog({
                    content: 'url:saveBrand.html',
                    title: '新增品牌',
                    width: 400,
                    height: 300,
                    max: true,
                    min: true,
                    lock: true,
                });
            },
        }
    });
</script>
</body>
</html>